<template>
	<view v-if="isLoaded">
		<u-sticky>
			<view class="date-box" style="color: #fff">
				<slot>
					<block v-if="mode == 'range'">
						<text @click="showCalendar = true">{{ param.dataTimeRange[0] }}</text>
						<text style="margin: 0 8px" @click="showCalendar = true">至</text>
						<text @click="showCalendar = true">{{ param.dataTimeRange[1] }}</text>
						<uni-icons @click="showCalendar = true" color="#fff" class="ml-10" custom-prefix="custom-icon" type="custom-icon-xiajiantou" size="20" />
					</block>
					<block v-else>
						<u-icon labelSize="12" name="arrow-left-double" label="前一天" @click="changeDataRange('prev')"></u-icon>

						<text style="margin-left: 20rpx" @click="showCalendar = true">{{ param.dataTimeRange }}</text>
						<uni-icons
							style="margin-right: 20rpx"
							@click="showCalendar = true"
							color="#fff"
							class="ml-10"
							custom-prefix="custom-icon"
							type="custom-icon-xiajiantou"
							size="20"
						/>

						<u-icon labelSize="12" name="arrow-right-double" label="后一天" labelPos="left" @click="changeDataRange('next')"></u-icon>
					</block>
				</slot>
			</view>
		</u-sticky>
		<view class="card">
			<view class="bg" />
			<view class="items">
				<slot name="li"></slot>
			</view>
		</view>
		<u-calendar
			:default-date="currentMonth"
			:show="showCalendar"
			:monthNum="15"
			:mode="mode"
			:maxRange="maxRange"
			@confirm="confirm"
			:allowSameDay="true"
			@close="showCalendar = false"
			color="#f3c45d"
		/>
	</view>
</template>

<script>
import { toastIconEnum } from '../../constants/uiConstants.js';
import date from '@/utils/date';
import { getPreviousDay, getNextDayOrNull, getFormattedDate } from '@/utils/date';
import { uShowLoading, uHideLoading, uSwitchTab, utoast } from '../../utils/uniUtils.js';
export default {
	name: 'LiStatistics',
	props: {
		fn: {
			required: true
		},
		param: {
			default: {}
		},
		mode: {
			type: String,
			default: 'range'
		},
		isLoaded: {
			type: Boolean,
			default: false
		},
		pageData: {
			required: true
		},
		maxRange: {
			default: 31
		}
	},
	watch: {
		showCalendar(newVal) {
			this.$emit('openPopup', newVal);
		}
	},
	data() {
		return {
			showCalendar: false,
			currentDate: getFormattedDate(),
			currentMonth: getFormattedDate()
		};
	},
	async mounted() {
		try {
			uShowLoading();
			await this.getPageData();
			this.$emit('update:isLoaded', true);
			uHideLoading();
		} catch (error) {
			this.$emit('update:isLoaded', false);
			console.log('error', error);
			utoast('加载失败!', toastIconEnum.error);
			// setTimeout(() => {
			//   uSwitchTab("/pages/tabBar/reportForms");
			// }, 1000);
		} finally {
			uHideLoading();
		}
	},
	methods: {
		async confirm(e) {
			this.$emit(
				'update:param',
				Object.assign(this.param, {
					dataTimeRange: this.mode == 'range' ? [e[0], e[e.length - 1]] : e[0]
				})
			);
			if (this.mode == 'single') {
				console.log(e);
				this.currentDate = e[0];
			}
			this.showCalendar = false;
			await this.getPageData();
		},
		async changeDataRange(type) {
			if (type === 'next') {
				const nextDate = getNextDayOrNull(this.currentDate);
				if (!nextDate) return;
				this.currentDate = nextDate;
			} else {
				const startDate = getPreviousDay(this.currentDate);
				this.currentDate = startDate;
			}
			this.currentMonth = this.currentDate;
			this.$emit(
				'update:param',
				Object.assign(this.param, {
					dataTimeRange: this.currentDate
				})
			);
			await this.getPageData();
		},
		async getPageData() {
			let res;
			// console.log("this.fn instanceof Function",this.fn instanceof Function);

			if (this.fn instanceof Function) {
				res = await this.fn(this.param);
			} else {
				res = await this.$api[this.fn](this.param);
			}
			this.$emit('update:pageData', res.data);
			this.$emit('afterLoaded', res.data);
		}
	}
};
</script>

<style lang="scss" scoped>
.date-box {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: $my-main-color;
	padding: 20rpx;
	font-size: 14px;
}

.card {
	padding: 0 20rpx;
	position: relative;
	.bg {
		width: 100%;
		height: 120rpx;
		border-radius: 0 0 3% 3%;
		background-color: $my-main-color;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.items {
		padding: 30rpx;
		// border-radius: 10rpx;
	}
}

.justify-around {
	display: flex;
	justify-content: space-around;
}

.flex-column {
	display: flex;
	padding: 30rpx 0;
	padding-top: 0;
	flex-direction: column;
	align-items: center;
}

.item-title {
	font-size: 12px;
	margin: 8px;
}
.item-big-title {
	font-size: 16px;
}

.item-big-content {
	color: #f3c45d;
	margin-top: 5px;
	font-size: 14px;
	text-align: center;
}
.item-content {
	margin-bottom: 8px;
	margin-top: 5px;
	font-size: 12px;
	text-align: center;
}
</style>
